import React from 'react';
import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';
const styles = StyleSheet.create({
	container: {
		flex: 1,
		marginHorizontal: 16
	},
	title: {
		textAlign: 'center',
		marginVertical: 8
	},
	fixToText: {
		flexDirection: 'row',
		justifyContent: 'space-between'
	},
	separator: {
		marginVertical: 8,
		borderBottomColor: '#737373',
		borderBottomWidth: StyleSheet.hairlineWidth
	}
});
const Separator = () => {
	return <View style={styles.separator} />;
};

const ButtonPage = () => {
	return (
		<SafeAreaView style={styles.container}>
			<View>
				<Text style={styles.title}>
                    The title and onPress handler are required. It is recommended to set
                    accessibilityLabel to help make your app usable by everyone.
				</Text>
				<Button
    onPress={() => Alert.alert('Simple Button pressed')}
    title="Press me"
				/>
			</View>
			<Separator />
			<View>
				<Text style={styles.title}>
                    Adjust the color in a way that looks standard on each platform. On
                    iOS, the color prop controls the color of the text. On Android, the
                    color adjusts the background color of the button.
				</Text>
				<Button
    color="#f194ff"
    onPress={() => Alert.alert('Button with adjusted color pressed')}
    title="Press me"
				/>
			</View>
			<Separator />
			<View>
				<Text style={styles.title}>
                    All interaction for the component are disabled.
				</Text>
				<Button
    disabled
    onPress={() => Alert.alert('Cannot press this one')}
    title="Press me"
				/>
			</View>
			<Separator />
			<View>
				<Text style={styles.title}>
                    This layout strategy lets the title define the width of the button.
				</Text>
				<View style={styles.fixToText}>
					<Button
    onPress={() => Alert.alert('Left button pressed')}
    title="Left button"
					/>
					<Button
    onPress={() => Alert.alert('Right button pressed')}
    title="Right button"
					/>
				</View>
			</View>
		</SafeAreaView>
	);
};



export default ButtonPage;
